<template>
	<view class="header" :style="{'height': statusBarHeight+'px','padding-top':statusBarHeight-44+'px','background-color':bgColor,'color':bgColor?'#000000':''}">
		{{title}}
		<view v-if="showBack" @click="goBack" class="back">
			<image src="../static/img/back.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBarHeight:getApp().globalData.statusBarHeight+44,
			}
		},
		props:{
			bgColor:{
				type:String,
				defualt:''
			},
			showBack:{
				type:Boolean,
				defualt:false
			},
			title:{
				type:String,
				defualt:''
			},
			isRecharge:{
				type:Boolean,
				defualt:false
			}
		},
		methods: {
			goBack(){
				if(!this.isRecharge){
					uni.navigateBack()
				}else{
					uni.reLaunch({
						url:'/pages/index/index?type=1'
					})
				}
			}
		}
	}
</script>

<style scoped>
	.header{
		background-color: #ace8f6;
		text-align: center;
		color: #FFFFFF;
		line-height: 44px;
		box-sizing: border-box;
		font-size: 32upx;
		font-weight: 900;
		position: relative;
	}
	.back{
		width: 100upx;
		height: 44px;
		position: absolute;
		left: 0;
		bottom: 0;
	}
	.back image{
		width: 40upx;
		height: 40upx;
		position: absolute;
		bottom: 50%;
		left: 50%;
		margin-bottom: -20upx;
		margin-left: -20upx;
	}
</style>
